{% extends "admin/change_form.html" %}

{% block extrahead %}
{{ block.super }}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // 预设模板定义
        var templates = {
            none: JSON.stringify({}, null, 4),
            h1: JSON.stringify({ "type": "h1", "content": "" }, null, 4),
            h2: JSON.stringify({ "type": "h2", "content": "" }, null, 4),
            p: JSON.stringify({ "type": "p", "content": "" }, null, 4),
            mission_basic_info: JSON.stringify({
                "type": "mission_basic_info",
                "country": "",
                "institution": "",
                "rocket_name": "",
                "payload_info": "",
                "launch_site": "",
                "mini_tags": [
                    { "title": "发射工位", "content": "" },
                    { "title": "目标轨道", "content": "" },
                    { "title": "任务性质", "content": "" },
                    { "title": "发射窗口", "content": "" }
                ]
            }, null, 4)
        };

        function addNewItem(template) {
            var textarea = $('#id_content');
            if (template) {
                textarea.val(template);
            }
        }

        $('#add_item').click(function() {
            addNewItem();
        });

        $('#load_template_button').click(function() {
            var selectedTemplate = $('#templateSelector').val();
            var template = templates[selectedTemplate];
            if (template) {
                addNewItem(template);
            } else {
                console.error("未找到指定的模板：" + selectedTemplate);
            }
        });
    });
</script>
{% endblock %}

{% block after_field_sets %}
{{ block.super }}
<div>
    <button type="button" id="add_item">添加内容块</button>
    <button type="button" id="load_template_button">加载选中的模板</button>
    <select id="templateSelector">
        <option value="">空模板</option>
        <option value="h1">一级标题</option>
        <option value="h2">二级标题</option>
        <option value="p">正文</option>
        <option value="mission_basic_info">任务基本信息卡片</option>
    </select>
</div>
{% endblock %}